<!-- src\views\HouseDetails.vue -->
<template>
  <div class="house-detail-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="6" animated />
    </div>

    <!-- 内容区域 -->
    <template v-else-if="house.id">
      <!-- 返回按钮 -->
      <div class="back-button-container">
        <el-button
          type="text"
          class="enhanced-back-btn"
          @click="$router.go(-1)"
        >
          <i class="animated-icon"></i>
          <span class="btn-content"> 返回列表 </span>
        </el-button>
      </div>

      <!-- 主内容区 -->
      <div class="house-content">
        <!-- 图片展示区 -->
        <section class="gallery-section">
          <el-carousel
            v-model="activeImageIndex"
            indicator-position="outside"
            height="500px"
            class="enhanced-gallery"
          >
            <el-carousel-item v-for="(img, index) in house.images" :key="index">
              <el-image
                :src="img"
                :preview-src-list="house.images"
                fit="cover"
                class="gallery-image"
                @error="handleImageError(img)"
              >
                <template #error>
                  <div class="image-error">
                    <i class="el-icon-picture-outline"></i>
                    <p>图片加载失败</p>
                    <pre>{{ errorMessage }}</pre>
                    <!-- 显示错误信息 -->
                  </div>
                </template>
              </el-image>
            </el-carousel-item>
          </el-carousel>

          <!-- 缩略图导航 -->
          <div v-if="house.images.length" class="thumbnail-nav">
            <div
              v-for="(img, index) in house.images"
              :key="index"
              class="thumbnail-item"
              :class="{ active: activeImageIndex === index }"
              @click="activeImageIndex = index"
            >
              <img :src="img" alt="缩略图" />
            </div>
          </div>
        </section>

        <!-- 房屋信息区 -->
        <section class="info-section">
          <!-- 标题和基本信息 -->
          <div class="header-info">
            <h1 class="house-title">{{ house.title }}</h1>

            <div class="meta-info">
              <el-tag type="info" effect="plain">
                <i class="el-icon-time"></i>
                发布于 {{ formatTime(house.createTime) }}
              </el-tag>
              <el-tag :type="statusTag.type" effect="plain">
                {{ statusTag.text }}
              </el-tag>
            </div>
          </div>

          <!-- 价格和关键信息 -->
          <div class="price-card">
            <div class="price-main">
              <!-- 月租金显示 -->
              <div class="monthly-price">
                <span class="symbol">¥</span>
                <span class="amount">{{ house.monthRent }}</span>
                <span class="unit">/月</span>
              </div>
              <!-- 新增日租金计算 -->
              <div class="daily-price">
                <span class="symbol">≈ ¥</span>
                <span class="amount">{{
                  (house.monthRent / 30).toFixed(2)
                }}</span>
                <span class="unit">/日</span>
              </div>
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>房屋面积</label>
                <p>{{ house.area }}㎡</p>
              </div>
              <div class="detail-item">
                <label>户型结构</label>
                <p>{{ house.layout }}</p>
              </div>
              <div class="detail-item">
                <label>所在楼层</label>
                <p>{{ house.floorInfo }}</p>
              </div>
              <div class="detail-item">
                <label>建筑类型</label>
                <p>{{ house.buildingType }}</p>
              </div>
            </div>
          </div>
          <div class="action-buttons" v-if="isTenant">
            <el-button
              class="favorite-btn"
              :type="house.isFavorite ? 'success' : 'primary'"
              :loading="house.loading"
              @click="handleFavorite"
            >
              <el-icon :size="18">
                <StarFilled v-if="house.isFavorite" />
                <Star v-else />
              </el-icon>
              {{ house.isFavorite ? "已收藏" : "收藏房源" }}
            </el-button>
          </div>
          <!-- 设施标签 -->
          <div class="feature-tags">
            <el-tag v-if="house.conditioner" type="success">空调</el-tag>
            <el-tag v-if="house.elevator" type="warning">电梯</el-tag>
            <el-tag v-if="house.toilet > 0" type="info"
              >{{ house.toilet }}卫</el-tag
            >
            <el-tag v-if="house.kitchen > 0" type="success"
              >{{ house.kitchen }}厨</el-tag
            >
          </div>

          <!-- 详细信息表格 -->
          <el-table
            :data="[house]"
            class="detail-table"
            :show-header="false"
            border
          >
            <el-table-column width="120">
              <template #default="{ row }">
                <div class="table-cell">
                  <i class="el-icon-sunny"></i>
                  朝向：{{ row.direction }}
                </div>
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="{ row }">
                <div class="table-cell">
                  <i class="el-icon-date"></i>
                  建成年份：{{ row.completionYear }}
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div
            class="date-picker-container"
            v-if="userStore.isLoggedIn && isTenant"
          >
            <!-- 标题 -->
            <h3 class="section-title">选择日期下单预定</h3>

            <div class="date-selector">
              <!-- 开始日期选择 -->
              <div class="date-item">
                <label>入住时间</label>
                <el-date-picker
                  v-model="startDate"
                  type="date"
                  placeholder="开始日期"
                  :disabled-date="disablePrevDates"
                  value-format="YYYY-MM-DD"
                />
              </div>

              <div class="separator">至</div>

              <!-- 结束日期选择 -->
              <div class="date-item">
                <label>退租时间</label>
                <el-date-picker
                  v-model="endDate"
                  type="date"
                  placeholder="结束日期"
                  :disabled-date="disableEndDates"
                  value-format="YYYY-MM-DD"
                />
              </div>
            </div>

            <!-- 预选月份按钮组 -->
            <div class="month-buttons">
              <el-button
                v-for="month in [1, 3, 6, 9, 12]"
                :key="month"
                class="month-btn"
                @click="selectMonths(month)"
              >
                {{ month }}个月
              </el-button>
            </div>

            <!-- 预定按钮 -->
            <el-button class="book-btn" type="primary" @click="handleBook">
              立即预定
            </el-button>
          </div>

          <!-- 房屋描述 -->
          <div class="description-section">
            <h2 class="section-title">
              <i class="el-icon-document"></i> 房源描述
            </h2>
            <div class="description-content">
              {{ house.description }}
            </div>
          </div>

          <!-- 联系信息 -->
          <div class="contact-section">
            <h2 class="section-title"><i class="el-icon-user"></i> 联系方式</h2>
            <div class="contact-info">
              <div class="contact-item">
                <el-icon class="contact-icon"><User /></el-icon>
                <div class="contact-detail">
                  <p class="contact-type">联系人</p>
                  <p class="contact-value">{{ house.contact.name }}</p>
                </div>
              </div>
              <div class="contact-item">
                <el-icon class="contact-icon"><Iphone /></el-icon>
                <div class="contact-detail">
                  <p class="contact-type">联系电话</p>
                  <p class="contact-value">{{ house.contact.phone }}</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 地图区域 -->
        <section class="map-section">
          <h2 class="section-title">
            <i class="el-icon-location-information"></i> 位置信息
          </h2>
          <div id="map-container" class="map"></div>
          <p class="location-text">{{ house.location }}</p>
        </section>
      </div>
    </template>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <el-empty description="房源信息不存在" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/api";
import { User, Iphone, Star, StarFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/user";

const route = useRoute();
const router = useRouter();
const house = ref({ isFavorite: false, loading: false });
const loading = ref(true);
const activeImageIndex = ref(0);
const errorMessage = ref("");
const userStore = useUserStore();
const startDate = ref("");
const endDate = ref("");

// 状态标签计算
const statusTag = computed(() => {
  const statusMap = {
    1: { text: "出租中", type: "success" },
    2: { text: "已出租", type: "danger" },
    3: { text: "已下架", type: "info" },
  };
  return statusMap[house.value.status] || { text: "未知状态", type: "warning" };
});

const isTenant = computed(
  () => userStore.userInfo?.roles?.[0]?.name === "ROLE_Tenant"
);

const handleFavorite = async () => {
  try {
    house.value.loading = true;
    const res = await api.collect.collectHouse(
      house.value.id,
      userStore.userInfo.id
    );

    // 更新收藏状态
    house.value.isFavorite = res.data;

    ElMessage.success({
      message: res.data ? "收藏成功" : "已取消收藏",
      duration: 1500,
      customClass: "el-message-success",
    });
  } catch (error) {
    ElMessage.error({
      message: error.response?.data?.message || "操作失败",
      duration: 2000,
      customClass: "el-message-error",
    });
  } finally {
    house.value.loading = false;
  }
};

// 数据格式化处理
const processHouseData = (data) => {
  const processedData = {
    id: data.id,
    isFavorite: !!data.isFavorite,
    title: data.title || "未命名房源",
    monthRent: data.monthRent,
    area: `${data.area}㎡`,
    images: data.houseImageList.map(
      (img) => `${"http://localhost:8080"}${img}`
    ),
    contact: {
      name: data.contactName || "管理员",
      phone: data.contactPhone || "暂无",
    },
    createTime: data.createTime,
    direction: data.direction,
    layout: `${data.bedroom}室${data.livingRoom}厅`,
    floorInfo: `${data.floor}/${data.maxFloor}层`,
    buildingType: data.elevator ? "电梯房" : "楼梯房",
    completionYear: data.completionYear,
    description: data.content,
    location: [data.city, data.address].filter(Boolean).join(" · "),
    latitude: data.latitude,
    longitude: data.longitude,
    conditioner: data.conditioner === 1,
    elevator: data.elevator === 1,
    toilet: data.toilet,
    kitchen: data.kitchen,
    status: data.status || 3,
  };

  return processedData;
};

// 加载房屋数据（修复版）
const loadHouseData = async () => {
  try {
    // 获取房源基础信息
    const res = await api.house.getHouses({ id: route.params.id });
    if (!res.data.data?.length) throw new Error("房源不存在");

    const rawData = res.data.data[0];

    // 检查收藏状态（需登录）
    if (userStore.isLoggedIn) {
      const collectRes = await api.collect.checkCollectStatus(
        rawData.id,
        userStore.userInfo.id
      );
      rawData.isFavorite = collectRes.data;
    }

    // 处理数据
    house.value = processHouseData(rawData);
  } catch (error) {
    ElMessage.error(error.message);
  } finally {
    loading.value = false;
  }
};

// 时间格式化（保持原样）
const formatTime = (timestamp) => {
  try {
    const date = new Date(timestamp);
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return "日期格式错误";
  }
};

// 图片错误处理函数
const handleImageError = (imgUrl) => {
  errorMessage.value = imgUrl;
  console.error(`Failed to load image: ${imgUrl}`); // 添加控制台日志
};

// 地图初始化（保持原样）
let map = null;
const initMap = () => {
  if (!house.value.latitude || !house.value.longitude) return;

  const loadGoogleMaps = () => {
    if (window.google?.maps) return;

    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
    script.async = true;
    document.head.appendChild(script);
  };

  const initialize = () => {
    const position = new window.google.maps.LatLng(
      house.value.latitude,
      house.value.longitude
    );

    map = new window.google.maps.Map(document.getElementById("map-container"), {
      zoom: 16,
      center: position,
      mapTypeControl: false,
      streetViewControl: false,
    });

    new window.google.maps.Marker({
      position,
      map,
      title: house.value.title,
    });
  };

  if (window.google?.maps) {
    initialize();
  } else {
    window.initMap = initialize;
    loadGoogleMaps();
  }
};

const disablePrevDates = (time) => {
  return time.getTime() < Date.now() - 8.64e7; // 减去1天毫秒数
};

const selectMonths = (months) => {
  // 创建当前日期对象并清除时间部分
  const start = new Date();
  console.log(start);
  start.setHours(0, 0, 0, 0);

  // 计算结束日期
  const end = new Date(start);
  end.setMonth(end.getMonth() + months);

  // 处理月末边界情况（如1月31日+1个月）
  if (end.getDate() !== start.getDate()) {
    end.setDate(0); // 设置为上月最后一天
  }

  // 更新响应式数据
  startDate.value = formatDate(start);
  endDate.value = formatDate(end);
};

// 辅助日期格式化函数
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

// 优化禁用日期函数
const disableEndDates = (time) => {
  const selectedDate = new Date(time);
  return selectedDate < new Date(startDate.value);
};
// 处理立即预订
const handleBook = async () => {
  try {
    // 验证日期选择
    if (!startDate.value || !endDate.value) {
      ElMessage.error("请选择完整的租期日期");
      return;
    }

    // 构造订单数据
    const orderData = {
      houseId: house.value.id,
      customerId: userStore.userInfo.id,
      startDate: startDate.value,
      endDate: endDate.value,
      monthRent: house.value.monthRent,
    };

    // 调用创建订单接口
    const { data: createdOrder } = await api.order.createOrder(orderData);

    // 显示确认对话框
    ElMessageBox.confirm(
      "请签约合同，点击确认前往合同页，取消请点击右上角",
      "订单创建成功",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "contract-confirm-box",
        type: "success",
      }
    )
      .then(() => {
        router.push({
          path: "/contract",
          query: { orderId: createdOrder.id },
        });
      })
      .catch(() => {
        ElMessage.info("订单已保存，可在订单列表中继续操作");
      });
  } catch (error) {
    ElMessage.error(error.response?.data?.message || "订单创建失败");
  }
};
onMounted(loadHouseData);
</script>

<style scoped lang="css">
/* 基础样式 */
.house-detail-page {
  position: relative;
  min-height: 100vh;
  background: #f8f9fa;
}

.loading-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.back-button-container {
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 图片展示区 */
.gallery-section {
  margin: 2rem auto;
  max-width: 1200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 在style部分添加 */
.favorite-section {
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 10;
}

/* 按钮样式 */
.action-buttons {
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 10;
}

/* 增强版返回按钮样式 */
.enhanced-back-btn {
  position: relative;
  padding: 12px 24px !important;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(64, 158, 255, 0.1),
    rgba(64, 158, 255, 0.05)
  );
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* 图标动画 */
  .animated-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--el-color-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E")
      no-repeat center;
    transition: transform 0.3s ease;
  }

  .btn-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--el-color-primary);
    font-weight: 500;
    padding-left: 8px;
  }

  /* 悬停效果 */
  &:hover {
    background: linear-gradient(
      135deg,
      rgba(64, 158, 255, 0.15),
      rgba(64, 158, 255, 0.1)
    );
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);

    .animated-icon {
      transform: translateX(-4px);
    }
  }

  /* 点击效果 */
  &:active {
    transform: translateY(1px);
    transition-duration: 0.1s;
  }
}

.monthly-price {
  display: flex;
  align-items: baseline;
}

.daily-price {
  display: flex;
  align-items: baseline;
  color: #7f8c8d; /* 浅灰色 */
  font-size: 0.9em; /* 稍小字号 */
  padding-bottom: 3px; /* 微调对齐 */
}

.daily-price .symbol {
  font-size: 0.9em; /* 调整符号大小 */
}

.daily-price .amount {
  font-size: 1.6rem; /* 比月租小 */
  font-weight: 500; /* 中等字重 */
  margin: 0 0.3rem;
}

.favorite-btn {
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* 未收藏状态 */
  &:not(.is-success) {
    background: linear-gradient(135deg, #409eff, #3375b9);
    border-color: #3375b9;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }

  /* 已收藏状态 */
  &.is-success {
    background: linear-gradient(135deg, #67c23a, #529b2e);
    border-color: #529b2e;

    &:hover {
      background: linear-gradient(135deg, #5daf34, #479028);
    }
  }

  /* 加载状态 */
  &.is-loading {
    opacity: 0.8;
    cursor: not-allowed;
  }

  .el-icon {
    margin-right: 8px;
    vertical-align: middle;
  }
}

.favorite-icon {
  color: #999;
  transition: all 0.3s;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
  }

  &:hover:not(.loading) {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.loading {
    animation: rotate 1s linear infinite;
    opacity: 0.7;
    cursor: not-allowed;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.enhanced-gallery {
  border-radius: 12px 12px 0 0;

  :deep(.el-carousel__indicators) {
    bottom: 20px;

    .el-carousel__button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      transition: all 0.3s;
    }

    .is-active .el-carousel__button {
      width: 24px;
      border-radius: 6px;
      background: var(--el-color-primary);
    }
  }
}

.gallery-image {
  width: 100%;
  height: 500px;
  border-radius: 12px;
}

.thumbnail-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, 80px);
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid #eee;

  .thumbnail-item {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.3s;

    img {
      width: 100%;
      height: 60px;
      object-fit: cover;
    }

    &.active {
      opacity: 1;
      box-shadow: 0 0 0 2px var(--el-color-primary);
    }
  }
}

/* 信息展示区 */
.info-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.house-title {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.meta-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;

  .el-tag {
    padding: 0.5rem 1rem;
  }
}

.price-card {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;

  .price-main {
    display: flex;
    align-items: flex-end; /* 底部对齐 */
    gap: 1.5rem; /* 增加间距 */
    margin-bottom: 1.5rem;

    .symbol {
      font-size: 1.5rem;
      color: var(--el-color-primary);
    }

    .amount {
      font-size: 2.5rem;
      font-weight: 600;
      margin: 0 0.5rem;
      color: #2c3e50;
    }

    .unit {
      color: #7f8c8d;
      font-size: 1rem;
    }
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    .detail-item {
      background: rgba(241, 243, 245, 0.5);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;

      label {
        display: block;
        color: #7f8c8d;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }

      p {
        font-weight: 500;
        color: #2c3e50;
        margin: 0;
      }
    }
  }
}
.back-button {
  color: #409eff; /* 链接颜色 */
  padding: 0;

  &:hover {
    text-decoration: underline;
    background: transparent;
  }

  .el-icon-back {
    margin-right: 6px;
  }
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2rem 0;

  .feature-tag {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }
}

.detail-table {
  margin: 2rem 0;

  :deep(.table-cell) {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    i {
      color: var(--el-color-primary);
    }
  }
}

/* 地图区域 */
.map-section {
  margin-top: 3rem;

  .map {
    height: 400px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .location-text {
    color: #7f8c8d;
    text-align: center;
    margin-top: 1rem;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .gallery-image {
    height: 300px;
  }

  .price-card .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-section {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .house-title {
    font-size: 1.6rem;
  }

  .price-main {
    .symbol {
      font-size: 1.2rem;
    }
    .amount {
      font-size: 2rem;
    }
  }

  .thumbnail-nav {
    grid-template-columns: repeat(3, 1fr);

    .thumbnail-item {
      height: 50px;

      img {
        height: 50px;
      }
    }
  }

  .map {
    height: 300px;
  }
}
.date-picker-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.4rem;
  text-align: center;
}

.date-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.date-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(50% - 30px); /* 调整宽度以适应“至”的位置 */
}

.separator {
  color: #7f8c8d;
  font-size: 1.2rem;
  position: relative;
  margin-top: 10px;
  margin-right: 100px;
  top: 10px; /* 调整垂直对齐 */
}

.month-buttons {
  margin: 25px 0;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.month-btn {
  padding: 12px 24px;
  border-radius: 8px;
  background: #f5f7fa;
  color: #409eff;
  border: 1px solid #409eff33;
  transition: all 0.3s ease;

  &:hover {
    background: #409eff11;
    transform: translateY(-2px);
  }
}

.book-btn {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #409eff, #3375b9);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}
</style>
